<template>
    <section class="sidebar-group"><p class="sidebar-group__title">Form 表单组件</p>
        <span class="link"
              name="button"
              draggable="true"
              @dragstart="itemDragStart('button',$event)"
        ><p class="link-text">Button 按钮</p></span>
        <span class="link"
              name="autocomplete"
              draggable="true"
              @dragstart="itemDragStart('autocomplete',$event)"
        ><p class="link-text">Autocomplete 自动补全输入框</p></span>
        <span class="link active"
              name="cascader"
              draggable="true"
              @dragstart="itemDragStart('cascader',$event)"
        ><p class="link-text">Cascader 级联选择器</p></span>
        <span class="link"
              name="checkbox"
              draggable="true"
              @dragstart="itemDragStart('checkbox',$event)"
        ><p class="link-text">Checkbox 多选框</p></span>
        <span class="link" name="color-picker"
              draggable="true"
              @dragstart="itemDragStart('color-picker',$event)"
        >
            <p class="link-text">Color Picker 取色器</p></span>
        <span class="link"
              name="date-picker"
              draggable="true"
              @dragstart="itemDragStart('date-picker',$event)"
        ><p class="link-text">Date Picker 日期选择器</p></span>
        <span class="link"
              name="datetime-picker"
              draggable="true"
              @dragstart="itemDragStart('datetime-picker',$event)"
        ><p class="link-text">DateTime Picker 日期时间选择器</p></span>
        <span class="link"
              name="form"
              draggable="true"
              @dragstart="itemDragStart('form',$event)"
        ><p class="link-text">Form 表单</p></span>
        <span class="link" name="input"
              draggable="true"
              @dragstart="itemDragStart('input',$event)"
        ><p class="link-text">Input 输入框</p></span>
        <span class="link" name="input-number"
              draggable="true"
              @dragstart="itemDragStart('input-number',$event)"
        >
            <p class="link-text">Input Number 数字输入框</p></span>
        <span class="link" name="radio"
              draggable="true"
              @dragstart="itemDragStart('radio',$event)"
        >
            <p class="link-text">Radio 单选框</p></span>
        <span class="link" name="rate"
              draggable="true"
              @dragstart="itemDragStart('rate',$event)"
        ><p class="link-text">  Rate 评分</p></span>
        <span class="link" name="select"
              draggable="true"
              @dragstart="itemDragStart('select',$event)"
        >
            <p class="link-text">Select 选择器</p></span>
        <span class="link"
              name="slider"
              draggable="true"
              @dragstart="itemDragStart('slider',$event)"
        ><p class="link-text">Slider 滑块</p></span>
        <span class="link" name="switch"
              draggable="true"
              @dragstart="itemDragStart('switch',$event)"
        > <p class="link-text">Switch 开关</p></span>
        <span class="link" name="time-picker"
              draggable="true"
              @dragstart="itemDragStart('time-picker',$event)"
        >
            <p class="link-text">Time Picker 时间选择器</p></span>
        <span class="link"
              name="time-select"
              draggable="true"
              @dragstart="itemDragStart('time-select',$event)"
        ><p class="link-text">Time Select 时间选择</p></span>
        <span class="link"
              name="transfer"
              draggable="true"
              @dragstart="itemDragStart('transfer',$event)"
        ><p class="link-text">Transfer 穿梭框</p></span>
        <span class="link"
              name="upload"
              draggable="true"
              @dragstart="itemDragStart('upload',$event)"
        ><p class="link-text">  Upload 上传</p></span>
    </section>
</template>

<script>
    export default {
        name: "FieldPanel",
        methods: {
            itemDragStart(name,env) {
                env.dataTransfer.setData("Text", name);
                env.dataTransfer.effectAllowed = "move";
                this.$emit("createRow", name);
            }
        }
    }
</script>

<style scoped>
    .sidebar-group {
        text-align: left;
        font-size: 13px;
        margin-left: 15px;
        height: inherit;
        overflow-y: scroll;
    }

    span {
        display: block;
        cursor: pointer;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }

    span:hover {
        text-decoration: underline;
        text-decoration-color: #1989fa;
    }

    p {
        font-weight: 500;
        text-decoration: inherit;
        color: var(--brand-color);
    }

    .link[data-v-8fa0a68a]:not(.flex) {
        display: block;
    }

    .link[data-v-8fa0a68a] {
        padding: 10px 16px;
        line-height: 1.5;
        font-size: .9rem;
        border-radius: 8px;
    }
</style>